/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, BlobInputList, Input, CCell, Table, TableBody, TableRow, Cell, InputLine, LineColumn,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {arraySetInp, tableSetInp} from "../../../common/tool";
import Img_Stiffness from "./stiffness.png";
import {SimpleImg} from "../../../comp/Image";
import {RepLink} from "../../common/base";

const tailZj = <Text css={{"@media print": {fontSize: '0.75rem'}}}>
    注：1、△h1为导梁过孔式架桥机，前支腿分别在E处与在D处时D点的变形量；△h2为非导梁过孔式架桥机，前支腿分别在B处
    与在G处悬空时G点的变形量。非导梁过孔式架桥机才需测量G点挠度值。<br/>
    2、对于产品标准和设计文件同时对静态刚度、上拱度或上翘度上都有规定的，以较严规定作为检验结果判定依据。对于标准和
    设计文件都没有规定的，相应的项目可不测量。<br/>
    3、对于C4.4.2.4，以设计文件作为检验结果判定依据时，设计要求值填在备注栏内。<br/>
    4、未检查或无需检验的，仅填检验结果栏。
</Text>;

const items静态刚度 = [['额载C点变形量△h', '额C', 'C点', '空载标高', '额载标高', '△h'],
    ['下导梁D处变形量△h1', '导D', 'D点', '空载标高', '负载标高', '△h1'],
    ['悬臂端G点变形量△h2', '悬G', 'G点', '过孔前标高', '过孔后标高', '△h2']];
export const itemA静态刚度: string[] = ['上拱表', '刚度备注'];
items静态刚度.forEach(([title, name], i: number) => {
    itemA静态刚度.push(name + '前');
    itemA静态刚度.push(name + '后');
    itemA静态刚度.push(name + 'h');
});
const items刚度要求 = ['C', 'D', 'G'];
items刚度要求.forEach((title, i: number) => {
    itemA静态刚度.push('刚度要' + title);
    itemA静态刚度.push('刚度' + title + 'r');
});
const items拱翘要求 = ['上拱', '上翘'];
items拱翘要求.forEach((title, i: number) => {
    itemA静态刚度.push(title + '要求');
    itemA静态刚度.push(title + '要r');
});

interface Props extends InternalItemProps {
    apno?: string;
}
export const Stiffness =
    React.forwardRef((
        {children, show, alone = true, redId, nestMd, label, apno='10'}: Props, ref
    ) => {
        const [getInpFilter] = useMeasureInpFilter(null, itemA静态刚度,);
        const {inp, setInp} = useItemInputControl({ref});
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">附录{apno} C4.3.2.5 主梁静态刚度、C4.4.2.4主梁跨中上拱度和有效悬臂处上翘度测量记录：单位：mm</Text>
            {items静态刚度.map(([title, name, point, bef, afr, delta]: any, i: number) => {
                return (<React.Fragment key={i}>
                    <Text>项目{i + 1} {title} - {point} {'>'}</Text>
                    {['主梁1', '主梁2'].map((lianlbl, L: number) => {
                        return <div key={L} css={{
                            display: 'flex',
                            flexWrap: 'wrap',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            &nbsp;{lianlbl} - {bef}
                            <Input value={inp?.[name + '前']?.[L] || ''}
                                   style={{display: 'inline-flex', width: '5rem'}}
                                   onChange={e => arraySetInp(name + '前', L, e.currentTarget.value, inp, setInp)}/>mm
                            &nbsp;{lianlbl} - {afr}
                            <Input value={inp?.[name + '后']?.[L] || ''}
                                   style={{display: 'inline-flex', width: '5rem'}}
                                   onChange={e => arraySetInp(name + '后', L, e.currentTarget.value, inp, setInp)}/>mm
                            &nbsp;{lianlbl} - {delta}
                            <Input value={inp?.[name + 'h']?.[L] || ''}
                                   style={{display: 'inline-flex', width: '5rem'}}
                                   onChange={e => arraySetInp(name + 'h', L, e.currentTarget.value, inp, setInp)}/>mm
                        </div>;
                    })}
                </React.Fragment>);
            })}
            <hr/>
            <Text variant="h5" css={{fontSize: '1.3rem'}}>上拱度和上翘度{'>>'}</Text>
            <div css={{display: 'flex', margin: 'auto'}}>
                <div css={{display: 'inline-block', margin: 'auto'}}>
                    {['主梁1', '主梁2'].map((lianlbl, d: number) => {
                        return <React.Fragment key={d}>
                            <Text variant="h6">上拱度和上翘度 - {lianlbl}:</Text>
                            A点
                            <Input value={inp?.上拱表?.[d]?.a || ''} size={4}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('上拱表', d, inp, setInp, 'a', e.currentTarget.value || undefined)}/>
                            (m)，C点
                            <Input value={inp?.上拱表?.[d]?.c || ''} size={4}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('上拱表', d, inp, setInp, 'c', e.currentTarget.value || undefined)}/>
                            (m)，B点
                            <Input value={inp?.上拱表?.[d]?.b || ''} size={4}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('上拱表', d, inp, setInp, 'b', e.currentTarget.value || undefined)}/>
                            (m)，G点
                            <Input value={inp?.上拱表?.[d]?.g || ''} size={4}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('上拱表', d, inp, setInp, 'g', e.currentTarget.value || undefined)}/>
                            (m)，上拱度
                            <Input value={inp?.上拱表?.[d]?.U || ''} size={4}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('上拱表', d, inp, setInp, 'U', e.currentTarget.value || undefined)}/>
                            ，上翘度
                            <Input value={inp?.上拱表?.[d]?.Q || ''} size={4}
                                   style={{display: 'inline-flex', width: 'unset'}}
                                   onChange={e => tableSetInp('上拱表', d, inp, setInp, 'Q', e.currentTarget.value || undefined)}/>
                            。
                        </React.Fragment>;
                    })}
                </div>
            </div>
            <hr/>
            <Text variant="h5" css={{fontSize: '1.3rem'}}>C4.3.2.5 静刚度要求值{'>>'}</Text>
            <LineColumn>
                {items刚度要求.map((pointt, i: number) => {
                    return <React.Fragment key={i}>
                        <InputLine label={pointt + '点挠度要求值：'}>
                            <Input value={inp?.['刚度要' + pointt] || ''}
                                   onChange={e => setInp({
                                       ...inp,
                                       ['刚度要' + pointt]: e.currentTarget.value || undefined
                                   })}/>
                        </InputLine>
                        <InputLine label={pointt + '点挠度-检验结果：'}>
                            <SelectHookfork value={(inp?.['刚度' + pointt + 'r']) || ''}
                                            onChange={e => setInp({
                                                ...inp,
                                                ['刚度' + pointt + 'r']: e.currentTarget.value || undefined
                                            })}/>
                        </InputLine>
                    </React.Fragment>;
                })}
            </LineColumn>
            <hr/>
            <Text variant="h5" css={{fontSize: '1.3rem'}}>C4.4.2.4 上拱度和上翘度要求值{'>>'}</Text>
            <LineColumn>
                {items拱翘要求.map((goqiao, i: number) => {
                    return <React.Fragment key={i}>
                        <InputLine label={goqiao + '度要求值：'}>
                            <Input value={inp?.[goqiao + '要求'] || ''}
                                   onChange={e => setInp({
                                       ...inp,
                                       [goqiao + '要求']: e.currentTarget.value || undefined
                                   })}/>
                        </InputLine>
                        <InputLine label={goqiao + '度-检验结果：'}>
                            <SelectHookfork value={(inp?.[goqiao + '要r']) || ''}
                                            onChange={e => setInp({
                                                ...inp,
                                                [goqiao + '要r']: e.currentTarget.value || undefined
                                            })}/>
                        </InputLine>
                    </React.Fragment>;
                })}
            </LineColumn>
            <div>备注:
                <BlobInputList value={inp?.刚度备注 || ''} rows={3}
                               onListChange={v => setInp({...inp, 刚度备注: v || undefined})}/>
            </div>
            { children ? children : tailZj }
        </InspectRecordLayout>;
});

export const StiffnessVw = ({orc, rep, label,children}: { orc: any, rep: any, label: string, children?: any}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: '8.5rem', pageBreakInside: 'avoid'}}}>
            <Text id='AxisVert' variant="h4" css={{
                marginTop: '1rem',
            }}>{label}</Text>
        </div>
        <Table id='Stiffness' fixed={["%"]} css={{borderCollapse: 'collapse', "@media print": {marginTop: '-8.5rem'}}} tight miniw={800}>
            <TableBody>
                <TableRow><CCell>
                        <SimpleImg url={Img_Stiffness} css={{
                            // width: '100%',
                            // maxWidth: '25rem'
                        }}/>
                 </CCell></TableRow>
            </TableBody>
        </Table>
        <div css={{textAlign: 'right'}}>（单位：mm）</div>
        <Table fixed={ ["%", "12.5%", "11%", "13%", "11%", "13%", "12%", "12%"] } css={{borderCollapse: 'collapse',}}
                    tight miniw={800}>
            <TableBody>
              <RepLink ori rep={rep} tag={'Stiffness'}>
                {items静态刚度.map(([title, name, point, bef, afr, delta]: any, i: number) => {
                    return (<React.Fragment key={i}>
                        {['主梁1', '主梁2'].map((lianlbl, L: number) => {
                            return <React.Fragment key={i+'_'+L}>
                                { 0===L && <TableRow>
                                        <CCell rowSpan={0===i? 1:3}>{0===i? '测量工况': title}</CCell><CCell>测量点</CCell><CCell colSpan={6}>{point}</CCell>
                                    </TableRow>
                                }
                                <TableRow>
                                    {0===i && 0===L && <CCell rowSpan={2}>{title}</CCell>}
                                    <CCell>{lianlbl}</CCell><CCell>{bef}</CCell><CCell>{orc?.[name + '前']?.[L]}</CCell>
                                    <CCell>{afr}</CCell><CCell>{orc?.[name + '后']?.[L]}</CCell>
                                    <CCell>{delta}</CCell><CCell>{orc?.[name + 'h']?.[L]}</CCell>
                                </TableRow>
                            </React.Fragment>;
                        })}
                    </React.Fragment>);
                })}
                <TableRow>
                    <CCell rowSpan={3}>上拱度和上翘度</CCell><CCell>测量点</CCell><CCell>A点</CCell><CCell>C点</CCell>
                    <CCell>B点</CCell><CCell>G点</CCell><CCell>上拱度</CCell><CCell>上翘度</CCell>
                </TableRow>
                {['主梁1', '主梁2'].map((lianlbl, d: number) => {
                    return <TableRow key={d}>
                        <CCell>{lianlbl}</CCell><CCell>{orc?.上拱表?.[d]?.a}</CCell><CCell>{orc?.上拱表?.[d]?.c}</CCell>
                        <CCell>{orc?.上拱表?.[d]?.b}</CCell><CCell>{orc?.上拱表?.[d]?.g}</CCell>
                        <CCell>{orc?.上拱表?.[d]?.U}</CCell><CCell>{orc?.上拱表?.[d]?.Q}</CCell>
                    </TableRow>;
                })}
                <TableRow>
                    <CCell rowSpan={3}>C4.3.2.5</CCell><CCell rowSpan={2}>静刚度要求值</CCell><CCell colSpan={2}>C点挠度要求值</CCell>
                    <CCell colSpan={2}>D点挠度要求值</CCell><CCell colSpan={2}>G点挠度要求值</CCell>
                </TableRow>
                    <TableRow>
                        {items刚度要求.map((pointt, i: number) => {
                            return <CCell key={i} colSpan={2}>{orc?.['刚度要' + pointt]}</CCell>;
                        })}
                    </TableRow>
                    <TableRow><CCell>检验结果</CCell>
                        {items刚度要求.map((pointt, i: number) => {
                            return <CCell key={i} colSpan={2}>{orc?.['刚度' + pointt + 'r']}</CCell>;
                        })}
                    </TableRow>
                 <TableRow>
                     <CCell rowSpan={3}>C4.4.2.4</CCell><CCell rowSpan={2}>上拱度和上翘度要求值</CCell>
                     <CCell colSpan={3}>上拱度要求值</CCell><CCell colSpan={3}>上翘度要求值</CCell>
                 </TableRow>
                  <TableRow>
                      {items拱翘要求.map((goqiao, i: number) => {
                          return <CCell key={i} colSpan={3}>{orc?.[goqiao + '要求']}</CCell>;
                      })}
                  </TableRow>
                  <TableRow><CCell>检验结果</CCell>
                      {items拱翘要求.map((goqiao, i: number) => {
                          return <CCell key={i} colSpan={3}>{orc?.[goqiao + '要r']}</CCell>;
                      })}
                  </TableRow>
              </RepLink>
            </TableBody>
        </Table>
        <Table fixed={["7%", "%"]} css={{borderCollapse: 'collapse',}} tight miniw={800}>
            <TableBody>
                <RepLink ori rep={rep} tag={'Stiffness'}>
                    <TableRow>
                        <CCell>备注</CCell>
                        <Cell split={true}>
                            <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                                {orc.刚度备注 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        {children ? children : tailZj}
    </>;
};
